// SCSS变量定义

// 颜色系统
$primary-color: #1989fa;
$success-color: #07c160;
$warning-color: #ff976a;
$danger-color: #ee0a24;
$info-color: #909399;

// 中性色
$white: #ffffff;
$black: #000000;
$gray-1: #f7f8fa;
$gray-2: #f2f3f5;
$gray-3: #ebedf0;
$gray-4: #dcdee0;
$gray-5: #c8c9cc;
$gray-6: #969799;
$gray-7: #646566;
$gray-8: #323233;

// 文本颜色
$text-color: #323233;
$text-color-2: #646566;
$text-color-3: #969799;
$text-color-4: #c8c9cc;

// 背景色
$background-color: #f7f8fa;
$background-color-light: #fafafa;

// 边框色
$border-color: #ebedf0;
$border-color-light: #f2f3f5;

// 间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

// 字体大小
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-md: 14px;
$font-size-lg: 16px;
$font-size-xl: 18px;
$font-size-2xl: 20px;

// 圆角
$border-radius-sm: 4px;
$border-radius-md: 8px;
$border-radius-lg: 12px;
$border-radius-xl: 16px;

// 字体粗细
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;

// 阴影
$box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
$box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
$box-shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.2);

// 动画时长
$animation-duration-base: 0.3s;
$animation-duration-fast: 0.2s;
$animation-duration-slow: 0.5s;

// 缓动函数
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
$ease-out: cubic-bezier(0, 0, 0.2, 1);
$ease-in: cubic-bezier(0.4, 0, 1, 1);

// 安全区域
$safe-area-inset-top: env(safe-area-inset-top);
$safe-area-inset-bottom: env(safe-area-inset-bottom);
$safe-area-inset-left: env(safe-area-inset-left);
$safe-area-inset-right: env(safe-area-inset-right);

// 能力维度颜色
$ability-breaking-ice: #ff6b6b;
$ability-empathy: #4ecdc4;
$ability-conversation-flow: #45b7d1;

// 情绪状态颜色
$emotion-very-happy: #2ecc71;
$emotion-happy: #27ae60;
$emotion-neutral: #f39c12;
$emotion-sad: #e67e22;
$emotion-angry: #e74c3c;

// Z-index 层级
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

// 断点
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

// 容器最大宽度
$container-max-width: 1200px;

// 导航栏高度
$navbar-height: 50px;
$tabbar-height: 50px;

// 输入框样式
$input-height: 44px;
$input-padding: 12px 16px;
$input-border-radius: $border-radius-md;
$input-border-color: $border-color;
$input-focus-border-color: $primary-color;

// 按钮样式
$button-height: 44px;
$button-padding: 0 16px;
$button-border-radius: $border-radius-md;
$button-font-size: $font-size-md;

// 卡片样式
$card-padding: $spacing-md;
$card-border-radius: $border-radius-lg;
$card-background: $white;
$card-shadow: $box-shadow-light;

// 列表项样式
$list-item-height: 56px;
$list-item-padding: $spacing-md;
$list-item-border-color: $border-color-light;

// 头像尺寸
$avatar-size-xs: 24px;
$avatar-size-sm: 32px;
$avatar-size-md: 40px;
$avatar-size-lg: 56px;
$avatar-size-xl: 80px;

// 标签样式
$tag-padding: 4px 8px;
$tag-border-radius: $border-radius-sm;
$tag-font-size: $font-size-xs;

// 徽章样式
$badge-size: 16px;
$badge-font-size: $font-size-xs;
$badge-border-radius: 50%;

// 进度条样式
$progress-height: 4px;
$progress-border-radius: 2px;
$progress-background: $gray-3;

// 分割线样式
$divider-color: $border-color;
$divider-thickness: 1px;

// 加载状态
$loading-spinner-size: 20px;
$loading-text-color: $text-color-3;

// 空状态
$empty-image-size: 120px;
$empty-text-color: $text-color-3;

// 错误状态
$error-color: $danger-color;
$error-background: #fef0f0;
$error-border-color: #fbc4c4;

// 成功状态
$success-background: #f0f9ff;
$success-border-color: #c4e1ff;

// 警告状态
$warning-background: #fffbf0;
$warning-border-color: #ffeaa7;